<template>
   
    <el-container class="home-container">
    <!--头部区域-->
        <el-header>
            <div>
                <img src="../assets/SimpleBlue.png" alt="">
                <span>SimpleBlue News</span>
            </div>
            <el-button type="info" @click="logout">退出</el-button>
        </el-header>
    <!--页面主体区-->
        <el-container>
        <!--侧边栏-->
            <el-aside width="200px">
                <!--侧边栏菜单区域-->
                <el-menu background-color="#46A7DC" text-color="#fff" active-text-color="#E88550" router :default-active="activePath">
                    <!--一级菜单-->
                    <el-submenu :index="item.id+' '"  v-for="item in menulist" :key="item.id">
                    <!--一级菜单模板区-->
                        <template slot="title">
                            <i :class="iconsObj[item.id]"></i>
                            <span>{{item.authorName}}</span>
                        </template>
                    <!--二级菜单-->
                    <el-menu-item :index="'/'+subItem.path" v-for="subItem in   item.children" :key="subItem.id" @click="saveNavState('/'+subItem.path)">
                      <template slot="title">
                            <span>{{subItem.name}}</span>
                        </template> 
                    </el-menu-item>   
                               
                </el-submenu>
            </el-menu>
         </el-aside>
        <!--右边内容主体-->
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>

</template>

<script>
export default {
    data(){
        return{
            //左侧菜单栏
          menulist:[
            {authorName:"权限管理",children:[{name:"用户权限",path:"users",id:11},{name:"查看权限",path:"right",id:12}],id:1 },
            {authorName:"新闻编辑",children:[{name:"编辑新闻",path:"news",id:21},{name:"编辑评论",path:"comment",id:22}],id:2},
            {authorName:"日志管理",children:[{name:"查看日志",path:"log",id:31}],id:3},
            {authorName:"数据管理",children:[{name:"查看数据",path:"data",id:41},{name:"分析数据",path:"analysis",id:42}],id:4}
          ],
          iconsObj:{
              '1':'el-icon-user-solid',
              '2':'el-icon-view',
              '3':'el-icon-document',
              '4':'el-icon-s-data'
              },
              //被激活的链接地址
              activePath:''
           
        };
    },
    created(){
        this.activePath=window.sessionStorage.getItem('activePath')
    },
    methods:{
        //退出
        logout(){
            this.$router.push("/login");
        },
        saveNavState(activePath){
            window.sessionStorage.setItem('activePath',activePath);
            this.activePath=activePath;
        }
    }
}
</script>
<style lang="less" scoped>
.home-container{
    height: 100%;
}
.el-header{
    background-color: #46A7DC;
    display: flex;
    justify-content: space-between;
    padding-left : 0 ;
    align-items: center;
    color: #fff;
    font-size: 20px;
    >div{
        display: flex;
        align-items: center;
        span{
            margin-left: 15px;
        }
    }
}
.el-aside{
    background-color: #46A7DC;
}
.el-main{
    background-color: #fff;
}
.iconfont{
    margin-right: 10px;
}

</style>